<template>
    <div class="attestation">
        <div class="z-header tc width-75 b-c2 c-f">
            <div @click="$router.back(-1)" class="lt">
                <i class="iconfont icon-zuo m-t-18"></i>
            </div>
            <div class="fs-36">
                认证中心
            </div>
        </div>
        <mt-navbar class="page-part" v-model="selected">
            <mt-tab-item id="1">自媒体认证</mt-tab-item>
            <mt-tab-item id="2">教师认证</mt-tab-item>
            <mt-tab-item id="3">企业认证</mt-tab-item>
            <mt-tab-item id="4">校园认证</mt-tab-item>
        </mt-navbar>
        <!-- tabcontainer -->
        <mt-tab-container v-model="selected" swipeable>
            <mt-tab-container-item id="1">
                <nav>
                    <ul>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">学校</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="school">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">姓名</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="name">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">学号</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="studentH">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">院系</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="faculty">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">专业</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="specialty">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">身份认证</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="identity">
                        </li>
                        <li class="width-75 z-header bb-1-e flex" @click="openPicker('0')">
                            <div>
                                <span class="att-ul-span">入学年份</span>
                                <span class="m-l-25 spam">{{start}}</span>
                            </div>
                            <div>
                                <i class="iconfont icon-you1"></i>
                            </div>
                        </li>
                        <li class="width-75 z-header bb-1-e flex" @click="openPicker('1')">
                            <div>
                                <span class="att-ul-span">毕业年份</span>
                                <span class="m-l-25">{{end}}</span>
                            </div>
                            <div>
                                <i class="iconfont icon-you1"></i>
                            </div>
                        </li>
                        <li class="width-75 z-header bb-1-e flex">
                            <span class="att-ul-span">认证收费</span>
                            <i class="iconfont icon-you1"></i>
                        </li>
                        <li class="width-75 z-header bb-1-e flex">

                            <span class="att-ul-span">身份证照片</span>
                        </li>
                        <li class="width-75 m-t-28 att-picture1">
                            <changeImg v-on:arr="toshow"></changeImg>
                        </li>
                    </ul>
                    <div class="tc">
                        <button class="att-button c-f m-t-6" @click="authentication(0)">立即认证</button>
                    </div>
                </nav>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <nav>
                    <ul>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">学校</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="school">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">姓名</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="name">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">工号</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="job">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">职务</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="duty">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">身份认证</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="identity">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">手机号</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="phone">
                        </li>
                        <li class="width-75">
                            <textarea name="" id="" cols="30" rows="10" class="b-0 f-family" placeholder="所熟悉的专业领域简介" v-model="intro"></textarea>
                        </li>
                    </ul>
                    <div class="tc">
                        <button class="att-button c-f m-t-6" @click="authentication(1)">立即认证</button>
                    </div>
                </nav>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <nav>
                    <ul>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">姓名</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="name">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">身份证号</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="identity">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">手机号</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="phone">
                        </li>
                        <li class="width-75 z-header bb-1-e flex" @click="isShow">
                            <div>
                                <span class="att-ul-span">学历</span>
                                <span class="m-l-25">点击更换 : {{classify}}</span>
                            </div>
                            <div>
                                <i class="iconfont icon-you1"></i>
                            </div>
                        </li>
                        <li class="width-75 z-header bb-1-e flex">
                            <span class="att-ul-span">缴纳保证金</span>
                            <i class="iconfont icon-you1"></i>
                        </li>
                        <li class="width-75 z-header bb-1-e flex">
                            <span>营业执照证明/毕业证证明</span>
                        </li>
                        <li class="width-75 m-t-28">
                            <!--<img src="../img/addImg.jpg" alt="">-->
                            <changeImg v-on:arr="toshow"></changeImg>
                        </li>
                    </ul>
                    <div class="tc">
                        <button class="att-button c-f m-t-6" @click="authentication(2)">立即认证</button>
                    </div>
                </nav>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <nav>
                    <ul>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">姓名</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model=" name">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">身份认证</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="identity">
                        </li>
                        <li class="width-75 z-header bb-1-e">
                            <span class="att-ul-span">手机号</span>
                            <input type="text" placeholder="请填写" class="b-0 m-l-25" v-model="phone">
                        </li>
                        <li class="width-75 z-header bb-1-e flex" @click="isShow">
                            <div>
                                <span class="att-ul-span">学历</span>
                                <span class="m-l-25">点击更换 : {{classify}}</span>
                            </div>
                            <div>
                                <i class="iconfont icon-you1"></i>
                            </div>

                        </li>
                        <li class="width-75 z-header bb-1-e flex">
                            <span class="att-ul-span">校园相关证明材料</span>
                        </li>
                        <li class="width-75 m-t-28">
                            <!--<img src="../img/addImg.jpg" alt="">-->
                            <changeImg v-on:arr="toshow"></changeImg>
                        </li>
                    </ul>
                    <div class="tc">
                        <button class="att-button c-f m-t-6" @click="authentication(3)">立即认证</button>
                    </div>
                </nav>
            </mt-tab-container-item>
        </mt-tab-container>
        <!--时间插件-->
        <mt-datetime-picker ref="picker" v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" class="remember" @confirm="handleConfirm" :startDate="startDate">
        </mt-datetime-picker>
        <!--学历-->
        <div class="education" v-show="flag">
            <mt-picker :slots="slots" @change="onValuesChange" class="education-choice"></mt-picker>
            <div class="ascertain" @click="isShow">
                确定
            </div>
        </div>
    </div>
</template>
<script>
import { getDate, changeImg, anSelectImg} from '../assets/js/common'
import { MessageBox } from 'mint-ui';
import { z } from '../assets/js/common'
export default {
    name: 'page-navbar',

    data() {
        return {
            selected: '1',
            pickerVisible: '2018-11-8',
            startDate: new Date('1960-1-1'),//时间选择棋的初始时间
            ClickDate: "",     //生明一个变量用了判断入学时间，和毕业时间
            start: "点击选择",  //开学时间
            end: "点击选择",    //毕业时间
            slots: [    //学历种类
                {
                    flex: 1,
                    values: ['博士', '硕士', '研究生', '本科', '专科', '高中', '初中'],
                    className: 'slot1'
                }
            ],
            classify: "点击选择", //用户选择的学历
            flag: false, //控制选择学历的div是否显示
            school: '', //学校,
            name: '',//名字
            studentH: '',//学号
            faculty: '',//院系
            specialty: '', //专业
            identity: '',//身份证
            job: '',//工号
            duty: '',//职务
            phone: '',//手机号
            intro: '',//老师简介
            imgurl: []
        };
    },
    methods: {
        openPicker(parameter) {//点击打开时开学间插件
            this.$refs.picker.open();
            this.ClickDate = parameter;//将传的参数保存
            console.log(this.dialogImageUrl);
        },
        handleConfirm() {
            // 判断给开学和毕业赋值
            if (this.ClickDate == 0) {
                this.start = getDate(this.pickerVisible);
            } else {
                this.end = getDate(this.pickerVisible);
            }
        },
        onValuesChange(picker, values) {//学历
            this.classify = values[0];
        },
        isShow() {//学历div是否隐藏
            this.flag = !this.flag;
        },
        toshow(msg) {
            // this.msg = msg;
            this.imgurl.push(msg);//将从后台返回过来的数据添加到imgurl的栈顶
        },
        authentication(type) {
            var params = new URLSearchParams();
            params.append("school.schoolId", localStorage.schoolId);
            params.append("role", type);
            params.append("name", this.name);
            params.append("certificates", this.identity);
            params.append("schoolNumber", this.studentH);
            params.append("workNumber", this.job);
            params.append("position", this.duty);
            params.append("education", this.classify);
            params.append("phone", this.phone);
            params.append("schoolSystem", this.faculty);
            params.append("schoolMajor", this.specialty);
            params.append("introduce", this.intro);
            if(this.start == "点击选择"){
                    
                    // var end = date.getTime(); //转换成时间戳
            }else{
                var start = new Date(this.start); //时间对象    
                var end = new Date(this.end); //时间对象
                params.append("entranceTime", start);
                params.append("graduationTime", end);
            }      
            
            params.append("ensureMoney", 0);
            params.append("pictures", this.imgurl);// /user/addApplyAuthentication


            this.$http({
                method: 'post',
                url: localPath + '/user/addApplyAuthentication',
                data: params
            }).then((response) => {
                 MessageBox.alert(response.data.message);
                console.log(response.data.message);
            }).catch((error) => {
                console.log(error);
            })
        }
    },
    mounted() {
         document.addEventListener(z());
    },
};
</script>

<style>
.attestation .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #c29354;
    color: #333333;
    margin-bottom: 0px;
}

.att-ul-span {
    width: 2rem;
}

.att-button {
    width: 6.90rem;
    height: .88rem;
    background-color: #c29354;
    border-radius: 6px;
}

 
</style>
